<template>
    <div class="warapper">
        <div class="button" @click="setTestCache()">
            <text class="button-text">{{buttonTextList[0]}}</text>
        </div>
        <div style="margin-top: 10px;" class="button" @click="getTestData()">
            <text class="button-text">{{buttonTextList[1]}}</text>
        </div>
        <div style="margin-top: 10px;" class="button" @click="Preload()">
            <text class="button-text">{{buttonTextList[2]}}</text>
        </div>
        <div style="margin-top: 10px;" class="button" @click="getData()">
            <text class="button-text">{{buttonTextList[3]}}</text>
        </div>
        <text style="font-size:20xp;">{{stroageContext}}</text>
    </div>
</template>
<script>
import TitleBar from "../components/TitleBar";
const jsOp = require("../components/cache/cacheOp.vue");
// const jsOp = require("../components/cache/cacheOp.vue");
import axios from "axios";
require("../components/cache/cache.vue");
const storageManager = require("../components/cache/storageManager.js");
export default {
  components: {
    TitleBar
  },
  data: {
    buttonTextList: ["set", "get", "预加载", "跳转"],
    stroageContext: "null"
  },
  created() {
    // this.getMenuData();
  },
  methods: {
    setTestCache: function() {
      //   console.log(`setTestCache${value}`);
      //   storageManager.setItem(key, value);
      this.getMenuData();
    },
    getTestData() {
      storageManager.getItem("1").then(value => {
        this.stroageContext = value;
      });
    },
    Preload() {
      jsOp.getCache("1");
    },
    getMenuData() {
      let self = this;
      axios
        .get("../../dist/components/cache/a.txt")
        .then(result => {
          console.log("getMenuData", result);
          jsOp.setCache("1", result);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
<style scoped src="../components/test.css"/>
<style scoped>
.warapper {
  align-items: center;
  justify-content: center;
}
</style>




